<template>
    <div class="left-container">
        <div class="leftItem" @click="clickItem(item)" v-for="item in types" :key="item">{{item}}</div>
    </div>
</template>
<script>
    const uuidv1 = require('uuid/v1');

    export default {
        data() {
            return {
                types: [
                    "图片广告", "商品", "文本", "魔方", "商品搜索"
                ]
            }
        },
        methods: {
            clickItem(type) {
                this.$emit('myclick', this.makeTtpesItem(type))
            },
            makeTtpesItem(type) {
                if (type === '图片广告') {
                    return {
                        id: uuidv1(),
                        type,
                        props: {
                            images: ['http://qiniu.liumingtai.com/157707089201301736.png', 'http://qiniu.liumingtai.com/157707089201301736.png']
                        },
                        isShowEdit: false,
                    }
                }
                if (type === '商品') {
                    return {
                        id: uuidv1(),
                        type,
                        props: {
                            products: []
                        },
                        isShowEdit: false,
                    }
                }
                return {
                    id: uuidv1(),
                    type,
                    props: {},
                    isShowEdit: false,
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .left-container {
        width: 200px;
        display: flex;
        flex-wrap: wrap;
        height: 400px;
        justify-content: flex-start;

        .leftItem {
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #eee;
            margin-right: 10px;
            margin-bottom: 10px;
            border-radius: 10px;
            cursor: pointer;
        }
    }
</style>
